// 该文件用于创建Vuex 中最为核心的store
// 引入Vue
import Vue from "vue";
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex);

// 1、准备 actions，用于响应组件中的动作
const actions = {
    // ++1操作
    // increment: function (context, value) {
    //     console.log('此处代表的是actions里面的Increment被调用了！');
    //     context.commit('INCREMENT', value);
    // }

    // // 其中方法名:function可以触发，方法名的简写形式
    // increment(context, value) {
    //     console.log('此处代表的是 actions 里面的 increment 加法被调用了！');
    //     context.commit('INCREMENT', value);
    // },
    // decrement(context, value) {
    //     console.log('此处代表的是 actions 里面的 decrement 减法被调用了！');
    //     context.commit('DECREMENT', value);
    // },
    incrementOdd(context, value) {
        console.log('此处代表的是 actions 里面的 incrementOdd 减法被调用了！');
        // 如果有任何业务逻辑或者ajax请求的话，都需要写到action里面
        if (context.state.sum % 2 !== 0) {
            context.commit('INCREMENTODD', value);
        }
    },
    incrementWait(context, value) {
        console.log('此处代表的是 actions 里面的 incrementWait 加法被调用了！');
        setTimeout(() => {
            context.commit('INCREMENTWAIT', value);
        }, 500)
    }
};

// 2、准备 mutations，用于操作数据（state）
// 其中 mutations 不要再写任何业务逻辑
const mutations = {
    INCREMENT(state, value) {
        console.log('此处代表的是 mutations 里面的 INCREMENT 加法被调用了！');
        state.sum += value;
    },
    DECREMENT(state, value) {
        console.log('此处代表的是 mutations 里面的 DECREMENT 减法被调用了！');
        state.sum -= value;
    },
    INCREMENTODD(state, value) {
        console.log('此处代表的是 mutations 里面的 INCREMENTODD 减法被调用了！');
        state.sum += value;
    },
    INCREMENTWAIT(state, value) {
        console.log('此处代表的是 mutations 里面的 INCREMENTWAIT 加法被调用了！');
        state.sum += value;
    },
};

// 3、准备 state，用于存储数据
const state = {
    sum: 0 // 当前的和
}

// 【可选属性，使用getters可以提供一算其他功能】
// 准备getters，用于将state中的数据进行加工。
const getters = {
    bigSum(state) {
        return state.sum * 10;
    }
}

// // 4、将store创建 new出来
// const store = new Vuex.Store({
//     actions: actions,
//     mutations: mutations,
//     state: state,
// })
//
// // 5、暴露【导出】store
// export default store;

// 4、将store创建 new出来，是对上述4、5步骤的简写形式
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
})
